<template>
	<div>
		请选中日期： <lay-date-picker @change="ks" v-model="endTime" placeholder="请选日期" allowClear></lay-date-picker>
		<div style="font-family: digital;color: #4cff00;    height: 100px; font-size: 20px;text-align: center;   background-color: #000000;">
			自定义倒计时 <div style="padding-top: 20px;">{{ days }}:{{ hours }}:{{ minutes }}:{{ seconds }}</div>
		</div>
		<lay-row space="10">
			<lay-quote> 倒计时，在线倒计时计算器，可选正数计时或倒数计算，倒计时结束时可设置声音提示，还有进度条实时显示进度。</lay-quote>
			<lay-col md="8" v-for="(item, index) in holiday" :key="index">
				<lay-card >
					<div
						style="font-family: digital;color: #4cff00;    height: 100px; font-size: 20px;text-align: center;   background-color: #000000;">
						距离{{item.name}}还有<div style="padding-top: 20px;">
						{{ hay[index]}}</div>
					</div>
				</lay-card>
			</lay-col>

		</lay-row>
	
		<lay-quote v-for="(item, index) in holiday" :key="index"> 
			<lay-field :title="item.name+'简介'"></lay-field>
			{{item.note}}
		</lay-quote>
		
	</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import http from "webosutils/lib/http";
const endTime = ref(0);
const show_time = ref("");
const startTimer = ref("");
const days = ref(0);
const hours = ref(0);
const minutes = ref(0);
const seconds = ref(0);
const holiday = ref([]) as any;
const hay=ref([]) as any;
// calculate date, hour, minute and second
const ks = (v: any) => {
	console.log(v);
	endTime.value = v;
	calcTime();
}
endTime.value= new Date().setFullYear(new Date().getFullYear() + 1);
console.log(endTime.value);
const calcTime = () => {
	//ui variables
	//clearInterval(startTimer);



	const updateTimer = () => {

		var now = new Date().getTime();
		var distance = new Date(endTime.value).getTime() - now;

		// Time calculations for days, hours, minutes and seconds
		days.value = Math.floor(distance / (1000 * 60 * 60 * 24));
		hours.value = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		minutes.value = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
		seconds.value = Math.floor((distance % (1000 * 60)) / 1000);




	}

	setInterval(function () { updateTimer(); }, 1000);

}
const setDate=()=>{
	setInterval(()=>{
		try{
			holiday.value.forEach((item:any,index:any) => {
			
			var now = new Date().getTime();
		var distance = new Date(item.date).getTime() - now;
	
			// Time calculations for days, hours, minutes and seconds
		let	d = Math.floor(distance / (1000 * 60 * 60 * 24));
		let	h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		let m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
		let	s= Math.floor((distance % (1000 * 60)) / 1000);
		hay.value[index]= d+"天"+h+"时"+m+"分"+(s>10?s:'0'+s)+"秒";
			});
		}catch(e){

		}


},1000);

}
const ajax = () => {

	http.post("/v1/api/portalsite/getholiday", {}).then(res => {

		res.data.forEach((item:any) => {
			hay.value.push(item.date);
		});
		holiday.value = res.data;
		setDate();
	}).catch(res => {


	})




}

ajax();
</script>
<style></style>